<template>
  <div class="payment-section">
    <div class="payment-header">
      <div class="header-title">
        <i class="fa fa-credit-card"></i>
        <span>收款</span>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" plain size="small" @click="$emit('scan-coupon')">
          <i class="fa fa-qrcode"></i> 扫优惠券
        </el-button>
        <el-button type="success" plain size="small" @click="$emit('round-down')">
          <i class="fa fa-scissors"></i> 抹零
        </el-button>
        <el-button type="warning" plain size="small" @click="$emit('manual-discount')">
          <i class="fa fa-tag"></i> 打折
        </el-button>
      </div>
    </div>
    
    <div class="payment-methods">
      <div 
        v-for="method in paymentMethods" 
        :key="method.id"
        :class="['payment-method', { active: selectedMethod === method.id }]"
        @click="selectPaymentMethod(method.id)"
      >
        <i :class="method.icon"></i>
        <span>{{ method.name }}</span>
      </div>
    </div>
    
    <div class="payment-form">
      <div class="amount-input">
        <div class="input-label">收款金额</div>
        <div class="input-field">
          <span class="currency-symbol">¥</span>
          <el-input-number 
            v-model="paymentAmount" 
            :min="0"
            :precision="2"
            :step="1"
            size="large"
            controls-position="right"
            @keyup.enter="processPayment"
          ></el-input-number>
        </div>
      </div>
      
      <div class="quick-amount">
        <el-button 
          v-for="amount in quickAmounts" 
          :key="amount"
          type="info" 
          plain 
          @click="setQuickAmount(amount)"
        >
          {{ amount }}元
        </el-button>
        <el-button 
          type="primary" 
          plain 
          @click="setExactAmount"
        >
          精确金额
        </el-button>
      </div>
      
      <div class="change-preview" v-if="showChange">
        <div class="preview-label">找零:</div>
        <div class="preview-amount">{{ formatPrice(calculateChange()) }} 元</div>
      </div>
      
      <div class="action-buttons">
        <el-button 
          type="primary" 
          size="large" 
          class="pay-button"
          :disabled="!canPay"
          @click="processPayment"
        >
          <i class="fa fa-check"></i> 完成支付
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface PaymentMethod {
  id: string;
  name: string;
  icon: string;
}

export default defineComponent({
  name: 'PaymentSection',
  props: {
    payableAmount: {
      type: Number,
      required: true
    },
    paymentMethods: {
      type: Array as PropType<PaymentMethod[]>,
      required: true
    }
  },
  emits: [
    'complete-payment', 
    'scan-coupon', 
    'round-down', 
    'manual-discount'
  ],
  setup(props, { emit }) {
    // 状态
    const selectedMethod = ref('cash')
    const paymentAmount = ref(0)
    const quickAmounts = [50, 100, 200, 500, 1000]
    
    // 监听应付金额变化
    watch(() => props.payableAmount, (newAmount) => {
      // 如果支付金额小于应付金额，更新为应付金额
      if (paymentAmount.value < newAmount) {
        paymentAmount.value = newAmount
      }
    }, { immediate: true })
    
    // 是否显示找零
    const showChange = computed(() => {
      return selectedMethod.value === 'cash' && paymentAmount.value > props.payableAmount
    })
    
    // 是否可以支付
    const canPay = computed(() => {
      return selectedMethod.value && paymentAmount.value >= props.payableAmount
    })
    
    // 计算找零金额
    const calculateChange = () => {
      return paymentAmount.value - props.payableAmount
    }
    
    // 格式化价格
    const formatPrice = (price: number) => {
      return price.toFixed(2)
    }
    
    // 选择支付方式
    const selectPaymentMethod = (methodId: string) => {
      selectedMethod.value = methodId
    }
    
    // 设置快速金额
    const setQuickAmount = (amount: number) => {
      paymentAmount.value = amount
    }
    
    // 设置精确金额
    const setExactAmount = () => {
      paymentAmount.value = props.payableAmount
    }
    
    // 处理支付
    const processPayment = () => {
      if (!canPay.value) {
        ElMessage.warning('支付金额不足')
        return
      }
      
      emit('complete-payment', {
        method: selectedMethod.value,
        amount: paymentAmount.value,
        change: calculateChange()
      })
    }
    
    return {
      selectedMethod,
      paymentAmount,
      quickAmounts,
      showChange,
      canPay,
      formatPrice,
      calculateChange,
      selectPaymentMethod,
      setQuickAmount,
      setExactAmount,
      processPayment
    }
  }
})
</script>

<style scoped lang="scss">
.payment-section {
  background-color: white;
  border-top: 1px solid #ebeef5;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  max-height: 250px;
  
  .payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    .header-title {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 500;
      
      i {
        margin-right: 8px;
        color: #409EFF;
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 8px;
      
      .el-button {
        padding: 5px 10px;
      }
    }
  }
  
  .payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    
    .payment-method {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 4px;
      background-color: #f5f7fa;
      cursor: pointer;
      transition: all 0.2s;
      
      i {
        margin-right: 6px;
        font-size: 16px;
      }
      
      &:hover {
        background-color: #ecf5ff;
      }
      
      &.active {
        background-color: #409EFF;
        color: white;
      }
    }
  }
  
  .payment-form {
    display: flex;
    flex-direction: column;
    
    .amount-input {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .input-label {
        width: 70px;
        font-size: 14px;
        color: #606266;
      }
      
      .input-field {
        flex: 1;
        display: flex;
        align-items: center;
        
        .currency-symbol {
          margin-right: 5px;
          font-size: 18px;
          color: #303133;
        }
        
        .el-input-number {
          width: 100%;
        }
      }
    }
    
    .quick-amount {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
      
      .el-button {
        padding: 5px 12px;
        font-size: 12px;
      }
    }
    
    .change-preview {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .preview-label {
        width: 70px;
        font-size: 14px;
        color: #606266;
      }
      
      .preview-amount {
        font-size: 18px;
        font-weight: 500;
        color: #67c23a;
      }
    }
    
    .action-buttons {
      display: flex;
      justify-content: flex-end;
      margin-top: auto;
      
      .pay-button {
        width: 100%;
      }
    }
  }
}
</style> 